<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .container {
            width: 600px;
            height: 600px;
            background-color: #ccc;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <!-- 容器标签 -->
    <div class="container"></div>



    <script>
        // 要求:
            // 根据参数创建指定的标签,并且添加到container标签内

        // 1.0 定义函数
        function createEl(tagName,option){
            // 获取容器标签
            var container = document.querySelector(".container");
            // console.log(container);
            // 创建指定标签
            var eleCreate = document.createElement(tagName);
            // console.log(typeof eleCreate);// object

            // 没有使用for ... in 语句
            // eleCreate.style["width"] = option["width"];
            // eleCreate.style["height"] = option["height"];
            // eleCreate.style["background"] = option["background"];
            // eleCreate.style["borderRadius"] = option["borderRadius"];

            // 循环option对象
            // console.log(option);
            for(var key in option){
                // console.log(option.key);// undefined 错误取值方式
                // console.log(option[key]);//          正确取值方式
                // 给eleCreate设置样式
                eleCreate.style[key] = option[key];
            }

            // 循环结束
            // 往container标签添加元素
            container.appendChild(eleCreate);
        }

        // 2.0 调用函数
        createEl("div",
            {
                width: "100px",
                height: "100px",
                background: "red",
                borderRadius: "20px"
            }
        )

        createEl("div",
            {
                width: "100px",
                height: "100px",
                background: "green",
                borderRadius: "20px"
            }
        )

        createEl("div",
            {
                width: "150px",
                height: "150px",
                background: "blue",
                borderRadius: "25px"
            }
        )
    </script>
</body>
</html>